SvelteKit uses a file-based routing system, meaning the structure of your src/routes directory directly maps to the routes in your application. Each .svelte file inside src/routes automatically becomes a page, and nested folders create nested routes.
For example, a file src/routes/about.svelte will be accessible at /about, and src/routes/blog/post.svelte will be accessible at /blog/post.
You can create dynamic routes by using square brackets in the file name. The value inside the brackets becomes a route parameter.
Nested folders allow creating nested routes, and SvelteKit provides +layout.svelte files to define layouts for multiple pages in a directory.
Optional parameters:
[param?].svelte– matches if the parameter is present or absent.Rest parameters (catch-all):
[...slug].svelte– matches multiple segments, e.g.,/blog/2025/09/26.Layouts (
+layout.svelte) and error pages (+error.svelte) provide structured control over multiple routes.
Organize your
src/routesdirectory clearly to match your URL structure.Use dynamic parameters for pages that depend on IDs or slugs.
Leverage layouts to avoid repeating markup across multiple pages.
Use SvelteKit’s
$pagestore orloadfunctions to access route parameters and fetch data for a page.